import React, { useState } from 'react'
import { Button, Form, Input, Select, DatePicker, Table,Tag,Space,} from 'antd';
import { useEffect } from 'react';
import { getUserApi } from '../../../apis/manger'
import {
  EyeOutlined,
  SettingFilled 
} from '@ant-design/icons';
export default function TablePage() {
    const [userList,setUserLiser] =useState({})
  const columns = [
    {
      title: '用户名',
      dataIndex: 'name',
      sorter: {
        compare: (a, b) => a.name.length - b.name.length,
        multiple: 1,
      },
    },
    {
      title: '性别',
      dataIndex: 'sex',
      filters: [
        {
          text: '男',
          value: '男',
        },
        {
          text: '女',
          value: '女',
        },
        {
          text: '保密',
          value: '保密',
        },
      ],
      onFilter: (value, record) => record.sex.includes(value),
    },
    {
      title: '邮箱',
      dataIndex: 'mail',
    },
    {
      title: '部门',
      dataIndex: 'department',
    },
    {
      title: '电话',
      dataIndex: 'tel',
    },
    {
      title: '状态',
      dataIndex: 'state',
      filters: [
        {
          text: '有效',
          value: '有效',
        },
        {
          text: '锁定',
          value: '锁定',
        },
      
      ],
      onFilter: (value, record) => record.state.includes(value),
      render: (_, { state }) => (
        <>
          {state.map((tag) => {
            let color = tag=='有效' ? 'green' : 'red';
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
      
    },
    {
      title: '创建时间',
      dataIndex: 'ctime',
      sorter:(a,b)=> {
        const t1 = new Date(a.ctime).getTime()
        const t2 = new Date(b.ctime).getTime()
        return t1-t2
      },
    },
    {
      title: '操作',
      dataIndex: 'operation',
    },
  ];
  const data = [];
  for (let i = 0; i < userList.length; i++) {
    data.push({
      key: i,
      name: userList[i].username,
      sex: userList[i].ssex == 0 ? '女':userList[i].ssex==1?'男':'保密',
      mail: userList[i].email,
      department: userList[i].deptName,
      tel:userList[i].mobile,
      state:[userList[i].status ==1 ? `有效`:'锁定'],
      ctime:userList[i].createTime,
      operation:<Space><SettingFilled style={{ color: 'rgb(74, 159, 245)',cursor:"pointer"}}/><EyeOutlined style={{ color: 'green',cursor:"pointer"}} /></Space>
    });
  }
  // 表格数据
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = (newSelectedRowKeys) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
    ],
  };

  useEffect(() => {
    geiUserData()
  }, [])

  async function geiUserData() {
    const res = await getUserApi({
      pageSize:100,
      pageNum:1
    })
    console.log('shuju',res.rows)
    setUserLiser(res.rows)
  }
  return (
    <Table rowSelection={rowSelection} columns={columns} dataSource={data} className="table-a">

      </Table>
  )
}
